<template>
    <div class="manage">
        <div class="manage-titlebar">
            <div class="manage-titlebar-text">Library Manage System</div>
            <div class="manage-titlebar-signout" @click="signout">Signout</div>
        </div>
        <div class="manage-content">
            <div class="manage-content-actionlist">
                <div v-for="menu in menus" :key="menu.name" @click="menu.click && menu.click()" class="manage-content-actionlist-item">
                    {{menu.name}}
                </div>
            </div>
            <div class="manage-content-panel">
                <component :is="currentView"></component>
            </div>
        </div>
    </div>
</template>

<script>
import { GET_AUTH, LOGOUT } from './api'

export default {
    mounted: function() {
        if (!this.$store.state.authToken) {
            return this.$router.replace('login')
        }

        GET_AUTH(this.$store.state.authToken).then(response => {
            if (!response.data) {
                this.$router.replace('login')
            }
        })

        this.allMenus = [
            {
                name: 'Users', click: () => {
                    console.log('clicked')
                }
            },
            { name: 'Books' }
        ]
        this.menus = this.allMenus
    },
    data: function() {
        return {
            menus: [],
            currentView: ''
        }
    },
    methods: {
        signout: function() {
            LOGOUT.then(response => {
                if (response.data)
                    this.$router.replace('login')
            })
        }
    }
}
</script>

<style lang="less" scoped>
.manage {
    width: 800px;
    height: 600px; // border: 1px solid #18d;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    box-shadow: 0 0 2px 0 #aaa;

    &-titlebar {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f5f5f5;
        padding: 0 20px;
        border-bottom: 1px solid rgba(176, 176, 176, 0.2);

        &-text {
            font-size: 19px;
        }
        &-signout {
            border-radius: 4px;
            background-color: #18d;
            color: #f5f5f5;
            padding: 2px 5px;
        }
    }
    &-content {
        display: flex;
        &-actionlist {
            width: 200px;
            height: 568px;
            border-right: 1px solid #f5f5f5;
            &-item {
                padding: 2px 5px;
                border: 1px solid #f5f5f5;
            }
        }
    }
}
</style>
